<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<html class="app">
<head>
  <meta charset="utf-8" />
  <title>Monster | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />
  <script type="text/javascript" src="/jquery/jquery.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <!--[if lt IE 9]>
  <script src="js/ie/html5shiv.js"></script>
  <script src="js/ie/respond.min.js"></script>
  <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">
<section class="vbox">
  <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
    <div class="navbar-header aside bg-info dk">
      <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
        <i class="icon-list"></i>
      </a>
      <a href="index.jsp" class="navbar-brand text-lt">
        <i class="icon-earphones"></i>
        <img src="images/logo.png" alt="." class="hide">
        <span class="hidden-nav-xs m-l-sm">Monster</span>
      </a>
      <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
        <i class="icon-settings"></i>
      </a>
    </div>      <ul class="nav navbar-nav hidden-xs">
    <li>
      <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
        <i class="fa fa-indent text"></i>
        <i class="fa fa-dedent text-active"></i>
      </a>
    </li>
  </ul>
      <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" action="SearchAllServlet?opr=searchSingers" method="post" role="search">
          <div class="form-group">
              <div class="input-group" style="float: left">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
                  <input type="text" class="form-control input-sm no-border rounded" name="content" required placeholder="搜索歌手，歌曲...">
              </div>
          </div>
      </form>
    <div class="navbar-right ">
      <ul class="nav navbar-nav m-n hidden-xs nav-user user">
        <li class="hidden-xs">
          <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
            <i class="icon-bell"></i>
            <span class="badge badge-sm up bg-danger count">2</span>
          </a>
          <section class="dropdown-menu aside-xl animated fadeInUp">
            <section class="panel bg-white">
              <div class="panel-heading b-light bg-light">
                <strong>You have <span class="count">2</span> notifications</strong>
              </div>
              <div class="list-group list-group-alt">
                <a href="#" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="images/a0png" alt="..." class="img-circle">
                    </span>
                  <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                </a>
                <a href="#" class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                </a>
              </div>
              <div class="panel-footer text-sm">
                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
              </div>
            </section>
          </section>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="images/a0png" alt="...">
              </span>
            John.Smith <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <li>
              <span class="arrow top"></span>
              <a href="#">Settings</a>
            </li>
            <li>
              <a href="profile.html">Profile</a>
            </li>
            <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                Notifications
              </a>
            </li>
            <li>
              <a href="docs.html">Help</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
  <section>
    <section class="hbox stretch">
      <!-- .aside -->
      <aside class="bg-black dk aside hidden-print" id="nav">
        <section class="vbox">
          <section class="w-f-md scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">



              <!-- nav -->
              <nav class="nav-primary hidden-xs">
                <ul class="nav bg clearfix">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    Discover
                  </li>
                  <li>
                    <a href="index.jsp">
                      <i class="icon-disc icon text-success"></i>
                      <span class="font-bold">What's new</span>
                    </a>
                  </li>
                  <li>
                    <a href="genres.html">
                      <i class="icon-music-tone-alt icon text-info"></i>
                      <span class="font-bold">Genres</span>
                    </a>
                  </li>
                  <li>
                    <a href="album.jsp">
                      <i class="icon-drawer icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">Events</span>
                    </a>
                  </li>
                  <li>
                    <a href="listen.html">
                      <i class="icon-list icon  text-info-dker"></i>
                      <span class="font-bold">Listen</span>
                    </a>
                  </li>
                  <li>
                    <a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
                      <i class="icon-social-youtube icon  text-primary"></i>
                      <span class="font-bold">Video</span>
                    </a>
                  </li>
                  <li class="m-b hidden-nav-xs"></li>
                </ul>
                <ul class="nav" data-ride="collapse">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    Interface
                  </li>
                  <li >
                    <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                      <i class="icon-screen-desktop icon">
                      </i>
                      <span>Layouts</span>
                    </a>
                    <ul class="nav dk text-sm">
                      <li >
                        <a href="layout-color.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Color option</span>
                        </a>
                      </li>
                      <li >
                        <a href="layout-boxed.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Boxed layout</span>
                        </a>
                      </li>
                      <li >
                        <a href="layout-fluid.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Fluid layout</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li >
                    <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                      <i class="icon-chemistry icon">
                      </i>
                      <span>UI Kit</span>
                    </a>
                    <ul class="nav dk text-sm">
                      <li >
                        <a href="buttons.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Buttons</span>
                        </a>
                      </li>
                      <li >
                        <a href="icons.html" class="auto">
                          <b class="badge bg-info pull-right">369</b>
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Icons</span>
                        </a>
                      </li><li >
                      <a href="http://www.weidea.net" class="auto">
                        <b class="badge bg-info pull-right">369</b>
                        <i class="fa fa-angle-right text-xs"></i>

                        <span>More</span>
                      </a>
                    </li>
                      <li >
                        <a href="grid.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Grid</span>
                        </a>
                      </li>
                      <li >
                        <a href="widgets.html" class="auto">
                          <b class="badge bg-dark pull-right">8</b>
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Widgets</span>
                        </a>
                      </li>
                      <li >
                        <a href="components.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Components</span>
                        </a>
                      </li>
                      <li >
                        <a href="list.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>List group</span>
                        </a>
                      </li>
                      <li >
                        <a href="#table" class="auto">
                            <span class="pull-right text-muted">
                              <i class="fa fa-angle-left text"></i>
                              <i class="fa fa-angle-down text-active"></i>
                            </span>
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Table</span>
                        </a>
                        <ul class="nav dker">
                          <li >
                            <a href="table-static.html">
                              <i class="fa fa-angle-right"></i>
                              <span>Table static</span>
                            </a>
                          </li>
                          <li >
                            <a href="table-datatable.html">
                              <i class="fa fa-angle-right"></i>
                              <span>Datatable</span>
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li >
                        <a href="#form" class="auto">
                            <span class="pull-right text-muted">
                              <i class="fa fa-angle-left text"></i>
                              <i class="fa fa-angle-down text-active"></i>
                            </span>
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Form</span>
                        </a>
                        <ul class="nav dker">
                          <li >
                            <a href="form-elements.html">
                              <i class="fa fa-angle-right"></i>
                              <span>Form elements</span>
                            </a>
                          </li>
                          <li >
                            <a href="form-validation.html">
                              <i class="fa fa-angle-right"></i>
                              <span>Form validation</span>
                            </a>
                          </li>
                          <li >
                            <a href="form-wizard.html">
                              <i class="fa fa-angle-right"></i>
                              <span>Form wizard</span>
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li >
                        <a href="chart.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Chart</span>
                        </a>
                      </li>
                      <li >
                        <a href="portlet.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Portlet</span>
                        </a>
                      </li>
                      <li >
                        <a href="timeline.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Timeline</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li >
                    <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                      <i class="icon-grid icon">
                      </i>
                      <span>Pages</span>
                    </a>
                    <ul class="nav dk text-sm">
                      <li >
                        <a href="profile.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Profile</span>
                        </a>
                      </li>
                      <li >
                        <a href="blog.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Blog</span>
                        </a>
                      </li>
                      <li >
                        <a href="invoice.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Invoice</span>
                        </a>
                      </li>
                      <li >
                        <a href="gmap.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Google Map</span>
                        </a>
                      </li>
                      <li >
                        <a href="jvectormap.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Vector Map</span>
                        </a>
                      </li>
                      <li >
                        <a href="signin.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Signin</span>
                        </a>
                      </li>
                      <li >
                        <a href="signup.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Signup</span>
                        </a>
                      </li>
                      <li >
                        <a href="404.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>404</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav text-sm">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    <span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
                    Playlist
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-music-tone icon"></i>
                      <span>Hip-Pop</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-playlist icon text-success-lter"></i>
                      <b class="badge bg-success dker pull-right">9</b>
                      <span>Jazz</span>
                    </a>
                  </li>
                </ul>
              </nav>
              <!-- / nav -->
            </div>
          </section>

          <footer class="footer hidden-xs no-padder text-center-nav-xs">
            <div class="bg hidden-xs ">
              <div class="dropdown dropup wrapper-sm clearfix">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs">                        
                        <img src="images/a3.png" class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
                  <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">John.Smith</strong> 
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
                </a>
                <ul class="dropdown-menu animated fadeInRight aside text-left">
                  <li>
                    <span class="arrow bottom hidden-nav-xs"></span>
                    <a href="#">Settings</a>
                  </li>
                  <li>
                    <a href="profile.html">Profile</a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="badge bg-danger pull-right">3</span>
                      Notifications
                    </a>
                  </li>
                  <li>
                    <a href="docs.html">Help</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
                  </li>
                </ul>
              </div>
            </div>            </footer>
        </section>
      </aside>
      <!-- /.aside -->
      <section id="content">
        <section class="vbox">
          <section class="scrollable wrapper">
            <div class="main_box" style="width: 100%;height: 100%;background-color: #d4d5ab">
              <div align="center">
                <a href="#"> <h4 class="m-t-lg m-b hot_singers" value="${text}" style="display: inline-block">热门歌手</h4></a>
                <a href="#"> <h4 class="m-t-lg m-b hot_songs"  value="${text}" style="display: inline-block">热门歌曲</h4></a>
                <a href="#"> <h4 class="m-t-lg m-b hot_albums"  value="${text}"  style="display: inline-block">热门专辑</h4></a>
                <a href="#"> <h4 class="m-t-lg m-b hot_playlists"  value="${text}" style="display: inline-block">热门歌单</h4></a>
              </div>
              <ul class="list-group list-group-lg hot_song_list" >
                <c:forEach items="${singerList}" var="singer" >
                  <li class="list-group-item hot_song_list"  style="height: 100px;padding-left: 20%;padding-right: 20%">
                    <div class="pull-right m-l">
                      <a href="#"  class="btn btn-default js-focus" focusType="1" value="${singer.singerId}"><i class="fa fa-plus"></i>&nbsp;&nbsp;关注</a>
                    </div>
                    <div class="clear text-ellipsis"  >
                      <img src="${singer.poster}" alt="" style="width: 80px;height: 80px">&nbsp;&nbsp;&nbsp;&nbsp;
                      <a href="#" class="js-play singer_item" value="${singer.singerId}">${singer.singerName}</a>
                      <span class="text-muted" > </span>
                    </div>

                  </li>
                </c:forEach>
                <c:forEach items="${songList}" var="song" >
                  <li class="list-group-item hot_song_list" style="height: 100px;padding-left: 20%;padding-right: 20%">
                    <div class="pull-right m-l">
                      <a href="#" class="m-r-sm"><i class="icon-plus" ></i></a>
                    </div>
                    <div class="clear text-ellipsis" style="text-indent: 1%" >
                      <img src="${song.poster}" alt="" style="width: 80px;height: 80px">&nbsp;&nbsp;&nbsp;&nbsp;
                      <a href="#" class="js-play song_item" value="${song.songId}">${song.songName}</a>
                      <span class="text-muted" > </span>
                    </div>
                  </li>
                </c:forEach>
                  <c:forEach items="${albumsList}" var="album" >
                      <li class="list-group-item hot_song_list"style="height: 100px;padding-left: 20%;padding-right: 20%" >
                          <div class="pull-right m-l" >
                              <a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
                          </div>
                          <div class="clear text-ellipsis" style="text-indent: 1%" >
                            <img src="${album.albumPoster}" alt="" style="width: 80px;height: 80px">&nbsp;&nbsp;&nbsp;&nbsp;
                              <a href="#" class="js-play album_item1" value="${album.albumId}">${album.albumName} </a><span>---------------</span>
                            <a href="" class="js-play album_item2" value="${album.singer.singerId}">${album.singer.singerName}</a>
                              <span class="text-muted" > </span>
                          </div>
                      </li>
                  </c:forEach>
                  <c:forEach items="${playlistsList}" var="playlist" >
                      <li class="list-group-item hot_song_list"  style="height: 100px;padding-left: 20%;padding-right: 20%" >
                          <div class="pull-right m-l">
                              <a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
                          </div>

                          <div class="clear text-ellipsis" style="text-indent: 1%" >
                            <img src="${playlist.playlistPoster}" alt="" style="width: 80px;height: 80px">&nbsp;&nbsp;&nbsp;&nbsp;
                              <a href="#" class="js-play playlist_item" value="${playlist.playlistId}">${playlist.playlistName}</a>
                              <span class="text-muted" > </span>
                          </div>
                      </li>
                  </c:forEach>
              </ul>
              <div class="info_box">
              </div>
            </div>
          </section>
        </section>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
      </section>
    </section>
  </section>
</section>
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/jPlayer/demo.js"></script>
</body>

<script>
    $(function () {
        $('.hot_songs').click(function () {
            var hot_songs = $(this).attr("value");
            //alert(hot_songs)
            window.location.href="/SearchAllServlet?opr=searchSongs&hot_songs="+hot_songs;
        })
    })

    $(function () {
        $('.hot_singers').click(function () {
            var hot_singers = $(this).attr("value");
         //   alert(hot_singers);
            window.location.href="/SearchAllServlet?opr=searchSinger&hot_singers="+hot_singers;
        })
    })
    $(function () {
        $('.hot_albums').click(function () {
            var hot_albums = $(this).attr("value");
           // alert(hot_albums);
            window.location.href="/SearchAllServlet?opr=searchAlbums&hot_albums="+hot_albums;
        })
    })
    $(function () {
        $('.hot_playlists').click(function () {
            var hot_playlists = $(this).attr("value");
           // alert(hot_playlists);
            window.location.href="/SearchAllServlet?opr=searchPlaylists&hot_playlists="+hot_playlists;
        })
    })

</script>

<script text="text/javascript">
    $(function () {
        $('.js-focus').click(function () {
        //获取关注对象的ID
        var focusId = $(this).attr("value");
        //获取用户ID
        var userId = 1001;
        //获取关注类型ID
        var focusType = $(this).attr("focusType");
        $.ajax({
            "url":"/UserFocusServlet",
            "data":"focusId="+focusId+"&userId="+userId+"&focusType="+focusType,
            "type": "GET",
            "dataType":"json",
            "success": function (result){
                if(result.data== "YES"){
                    $('.js-focus').html("<i class=\"fa fa-minus\"></i>&nbsp;&nbsp;取消关注");
                    alert("关注成功");
                } else if(result.data == "NO"){
                    $('.js-focus').html("<i class=\"fa fa-plus\"></i>&nbsp;&nbsp;关注");
                    alert("取消关注成功");
                }else{
                    alert("操作异常，请稍后重试");
                }
            }
        })
    })
    })
    $(function () {
        $('.singer_item').click(function () {
            var singer_id = $(this).attr("value");
           // alert(singer_id);
           window.location.href="music/singer?id"+singer_id;
        })
    })
    $(function () {
        $('.song_item').click(function () {
            var song_id = $(this).attr("value");
            //alert(song_id)
            window.location.href="music/song?id="+song_id;
        })
    })

    $(function () {
        $('.album_item1').click(function () {
            var album_id = $(this).attr("value");
          // alert(album_id)
            window.location.href="music/album?id="+album_id;
        })
    })

    $(function () {
        $('.album_item2').click(function () {
            var singer_id = $(this).attr("value");
            //alert(singer_id);
            window.location.href="music/singer?id="+singer_id;
        })
    })
    $(function () {
        $('.playlist_item').click(function () {
            var playlist_id = $(this).attr("value");
            //alert(playlist_id)
            window.location.href="music/playlist?id="+playlist_id;
        })
    })

</script>
</html>